<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //第二个td
                //$("tbody td:eq(2)").css("color","#f00");
                
                //nth最小是1，是每个td
                $("tbody td:nth-child(2)").css("color","#f00");
                
                //以下方法进行遍历基本上是js进行操作
                //对于jQuery有自己的一套遍历方法，可以直接通过
                //each函数进行
//                var ns = $("tbody td:nth-child(2)");
//                for(var i=0;i<ns.length;i++) {
//                    var nn = ns[i];//此时的nn已经是js的节点
//                    var id = $(ns[i]).prev("td").html();
//                    var age = $(ns[i]).next("td").html();
//                    nn.innerHTML = id+">>"+ nn.innerHTML+"("+age+")";
//                }

                //对于Jquery而言，可以用each遍历所有的数组对象
                //each中的匿名函数n表示的是数组的下标,从0开始
                var ns = $("tbody td:nth-child(2)");
//                ns.each(function(n){
//                    alert(n+$(this).html());
//                });

                ns.each(function(n){
                   $(this).html($(this).prev("td").html()+"."+
                           $(this).html()+"("+$(this).next("td").html()+")"); 
                });
            });
        </script>
    </head>
    <body>
        <table width="700" border="1" align="center" id="tus"></table>
        <table width="700" border="1" align="center" id="users">
            <thead>
                <tr>
                    <td>用户标识</td>
                    <td>用户姓名</td>
                    <td>用户年龄</td>
                    <td>用户密码</td>
                </tr>
            </thead>
            <tbody>
                <tr id="abc">
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>33</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>13</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>45</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>朱琪</td>
                    <td>21</td>
                    <td>abc123</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
